class Xiaoye {

    constructor(options) {
        const { el, data, methods } = options
        this.el = document.querySelector(el)
        this.data = data
        this.methods = methods
        this.showPool = new Map()
        this.eventPool = new Map()
        this.init()
    }

    init() {
        this.initData()
        this.initDom(this.el)
        this.initView(this.showPool)
        this.initEvent(this.eventPool)
    }



    //1.代理数据与数据劫持
    initData() {
        for (let key in this.data) {
            //this.boxShow1 -> this.data.boxShow1
            Object.defineProperty(this, key, {
                get() {
                   console.log('访问', key, this.data[key])
                    return this.data[key]
                },
                set(newValue) {
                  //  console.log('设置:',k,newValue)
                    this.data[key] = newValue
                    
                }
            })
        }
    }
    //2.初始化DOM
    initDom(el) {
        const _childNodes = el.childNodes
        if (!_childNodes.length) {
            return
        }

        _childNodes.forEach((dom) => {
            if (dom.nodeType === 1) {
                const vIf = dom.getAttribute('v-if')
                const vShow = dom.getAttribute('v-show')
                const vEvent = dom.getAttribute('@click')
                if (vIf) {
                    this.showPool.set(dom, {
                        type: 'if',
                        show: this.data[vIf],
                        data: vIf
                    })

                } else if (vShow) {
                    this.showPool.set(dom, {
                        type: 'show',
                        show: this.data[vShow],
                        data: vShow
                    })
                }
                if (vEvent) {
                    this.eventPool.set(dom, this.methods[vEvent])
                }
            }
            this.initDom(dom)
        })

    }
    //3.初始化视图
    initView(showPool) {
        this.domChange(showPool)
    }
    //4.eventPool 时间处理函数的绑定
    initEvent(eventPool){
        for (let [k, v] of eventPool) {
            k.addEventListener('click',v.bind(this),false)
        
        }
    }
    domChange(data,showPool) {
        console.log(showPool)
        if(!data){
            for (let [k, v] of showPool) {
                switch (v.type) {
                    case 'if': {
                            v.comment=document.createComment(`v-if`)
                            !v.show&&k.parentNode.replaceChild(v.comment,k)
                    }
                        break;
                    case 'show': {
                        !v.show && (k.style.display = 'none')
    
                    }
                        break;
                    default:
                        break;
                }
            }
            return 
        }
        console.log(showPool)
        // for (let [k, v] of showPool) {
        //     if(v.data===data){
        //         console.log(1)
        //     }
        // }


    }
    /**
     * showPool[
     * [
     *  dom,
     * {
     *         type:if/show
     *        show:true/false,
     *      data:绑定的数量
     * }
     * ]
     * 
     * ]
     * 
     * eventPool[
     *  [
     *  dom,
     * handle
     * 
     * 
     * ]
     *  
     * 
     * ]
     * 
     * 

     * 
     * //5.改变数据的同时，改变DOM
     */
}